<template>
  <div>
    <!-- 添加或修改公告对话框 -->
    <div class="center_dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="设备名称" prop="equipmentName">
          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="form.brand" placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item label="规格型号" prop="model">
          <el-input v-model="form.model" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="类别" prop="typeId">
          <el-select v-model="form.typeId" value-key="typeId" placeholder="请选择类别" style="width:100%">
            <el-option v-for="dict in typedict" :key="dict.index" :label="dict.typeName" :value="dict">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select v-model="form.unit" placeholder="请选择单位" style="width:100%">
            <el-option v-for="dict in dict" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计量设备" prop="meterageFlag">
          <el-select v-model="form.meterageFlag" placeholder="请选择单位" style="width:100%">
            <el-option v-for="(dict, index) in ['是', '否']" :key="index" :label="dict" :value="index + ''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.meterageFlag === '0'" label="计量编号" prop="meterageNum">
          <el-input v-model="form.meterageNum" placeholder="请输入计量编号" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="设备图片" prop="image">
          <Upload :imgUrl="form.image" @clearimgUrl="() => form.image = ''" @handleSuccess="handleSuccess"></Upload>
        </el-form-item>
        <el-form-item label="设备附件" prop="file">
          <FileUpload v-model="form.file" :limit="1" :fileSize="50"
            :fileType="['xls', 'xlsx', 'doc', 'docx', 'pdf', 'jpg', 'png']">
          </FileUpload>
        </el-form-item>
      </el-form>
    </div>
    <div align="center" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="$emit('parent_close')">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getdatalist, gettypelist, getsupplierlist, postequipmentlist, putequipmentlist, checkUniqeByName } from '@/api/equipment/equipment.js'
import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    Upload
  },
  data () {
    return {
      form: {
        "equipmentName": "", //设备名称
        "brand": "", //品牌
        "model": "", //规格型号
        "typeId": '', //类别ID
        "unit": '', //单位
        "meterageFlag": '1', //计量设备（0是 1否）
        "meterageNum": "", //计量编号
        "image": "", //设备图片
        "file": "", //设备附件
        "remark": "" //备注
      },
      dict: [],//单位字典列表
      typedict: [],//类别列表
      supplierdict: [],//供应商列表
      rules: {
        equipmentName: { required: true, message: '必填', trigger: 'blur' },
        brand: { required: true, message: '必填', trigger: 'blur' },
        model: { required: true, message: '必填', trigger: 'blur' },
        typeId: { required: true, message: '必填', trigger: 'blur' },
        unit: { required: true, message: '必填', trigger: 'blur' },
        meterageFlag: { required: true, message: '必填', trigger: 'blur' },
        image: { required: true, message: '必填', trigger: 'blur' },
        meterageNum: { required: false, message: '必填', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    handleSuccess (res) {
      console.log(res);
      this.form.image = res.res.data.url
    },
    async getlist () {
      let data = await getdatalist({ dictType: 'base_unit' });
      let params = await gettypelist({ status: 0 });
      let supplierdata = await getsupplierlist();
      this.dict = data.data
      this.typedict = params.data
      this.supplierdict = supplierdata.data
      if (this.title === '修改设备基值') {
        this.form = { ...this.rowObj }
      }
    },
    // SelectChange () {

    // },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '修改设备基值') {//修改
            let params = {
              ...this.form
            }
            putequipmentlist(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.getList()
              }
            })
          } else {//新增
            let params = {
              ...this.form,
              typeId: this.form.typeId.typeId,
              typeName: this.form.typeId.typeName,
            }
            checkUniqeByName({ equipmentName: this.form.equipmentName }).then((res) => {
              if (res.data == 0) {
                this.$emit('parent_indexB', params)
              } else {
                this.$message({
                  message: '已存在相同设备，请重新输入！',
                  type: 'error'
                })
              }
            })
            // postequipmentlist(params).then(res => {
            //   if (res.code === 200) {
            //     this.$message.success(res.msg)
            //     this.$parent.open = false
            //     this.$parent.handleUpdate()
            //   }
            // })
          }
        }
      });
    },
    handleremoveflie () {
      // 附件删除时调用
      this.form.file = ''
      // for (const key in this.flie) {
      //   this.flie[key] = ''
      // }
    },
    beforeAvatarUploadflie (file) {
      // 附件
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['pdf', 'docx', 'doc', 'xlsx', 'xls', 'jpg', 'png']
      const isLt2M = file.size / 1024 / 1024 < 50
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message({
          message: '上传附件支持xls,xlsx ,docx ,doc,pdf,jpg,png格式,大小不超过50M。',
          type: 'warning'
        })
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 50MB!')
        return false
      }
    },
    handlePictureCardflie (file) {
      // 附件成功
      // if (this.form.file !== '') {
      //   return this.$message.error('只可上传一份附件')
      // }
      console.log(file);
      this.form.file = file.data.url
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  margin: 0px auto;
}
</style>